<template>
	<view class="content">
		<view class="card">
			<view class="card-left">
				充电地址：
			</view>
			<view class="card-right">
				闽南科技学院（康美校区）-学生楼架空1期-1103790901
			</view>
		</view>

		<view class="card">
			<view class="card-left">
				账户余额：
			</view>
			<view class="card-right">
				31.82元
			</view>
		</view>

		<view class="card">
			<view class="card-left">
				余额充电：
			</view>
			<view class="card-right  ">
				<u-grid  col="2">
					<u-grid-item v-for="(item,index) in balanceCharge" :key="index">
						<button  class="btn martop">{{item.title}}</button>

					</u-grid-item>

				</u-grid>
				
			</view>
		</view>

		<view class="card">
			<view class="card-left">
				充值入口：
			</view>
			<view class="card-right ">
				<u-grid  col="2">
					<u-grid-item  v-for="(item,index) in rechargeInfo" :key="index">
						<button  class="btn">{{item.title}}</button>
				
					</u-grid-item>
				
				</u-grid>
			</view>
		</view>

		<view class="card">
			<view class="card-left">
				充电说明：
			</view>
			<view class="card-right">
				<view class="">
					1.指定充电时长充电，充满将不会自停，推荐使用【充满自停】
				</view>
				<view class="">
					2.余额充电选择充满自停，系统会根据充电时间智能扣费
				</view>
				<view class="">
					3.客服热线 <text style="color: #c34543;">400-999-7363</text>,服务时间✔周一至周五 9:00-18:00
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balanceCharge: [{
					title:"充满自停"
				},
				{
					title:"4小时"
				},
				{
					title:"6小时"
				},
				{
					title:"8小时"
				},
				{
					title:"10小时"
				},
				{
					title:"12小时"
				},
				],
				rechargeInfo: [{
						title: "购买包月"
					},
					
					{
						title: "充值余额"
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		//卡片
		.card {
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #f4f4f4;
			display: flex;

			align-items: center;

			// 左边部分
			.card-left {
				width: 190rpx;
			}

			// 右边部分
			.card-right {
				flex: 1;
				font-size: 25rpx;
				.btn{
					width: 200rpx;
					background: linear-gradient(to right, #59af2a, #1d4e00);
					color: #f4f4f4;
					font-size: 20rpx;
					
				}
				.martop{
					margin-top: 20rpx;
				}
			}

		


		}
	}
</style>